<%@page import="java.io.File"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="js/forrest.js"></script>

<style>
.ui-datepicker {
	font-size: 12px;
	width: 200px;
}

.ui-datepicker select.ui-datepicker-month {
	width: 30%;
	font-size: 11px;
}

.ui-datepicker select.ui-datepicker-year {
	width: 40%;
	font-size: 11px;
}
}
</style>
<script type="text/javascript">
	$(document).ready(function() {
		$("#username").focus();

		$("#birthdate").datepicker({
			changeMonth : true,
			changeYear : true,
			yearRange : 'c-100:c+0',
			showButtonPanel : true,
			currentText : '오늘 날짜',
			closeText : '닫기',
			dateFormat : "yy-mm-dd",
			showAnim : "slide",
			showMonthAfterYear : true,
			dayNamesMin : [ '월', '화', '수', '목', '금', '토', '일' ],
			monthNamesShort : [ '1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월' ]
		});

		function imgThumbnail(imgObj) {
			if (imgObj.files && imgObj.files[0]) {
				var reader = new FileReader();
				reader.onload = function(e) {
					$("#imgFile").attr('src', e.target.result).css({
						"width" : "100px",
						"height" : "100px"
					});
				};
				reader.readAsDataURL(imgObj.files[0]);
			}
		}

		$("#btnImgFile").change(function() {
			imgThumbnail(this);
		});

		$("#btnReset").click(function() {
			$("#imgFile").attr('src', '');
		});

		$("#passwd2").change(function() {
			passwd1 = $("#passwd").val();
			passwd2 = $("#passwd2").val();

			if (passwd1 != passwd2) {
				text = "비밀번호가 일치하지 않습니다.";

			} else {
				text = "";
				;
			}
			$("#passwdNotice").html(text).css({
				"color" : "blue",
				"font-size" : "8pt"
			});

		});

		$("#frmRegister").submit(function() {
			passwd1 = $("#passwd");
			passwd2 = $("#passwd2");

			if (passwd1.val() != passwd2.val()) {
				alert("비밀번호가 일치하지 않습니다. 다시 입력하시기 바랍니다.");
				$(passwd1).val("").focus();
				$(passwd2).val("");
				return false;
			}
		});

		$("#btnIdCheck").click(function() {
			userid = "userid=" + $("#userid").val();
			
			if ($("#userid").val() != null && $("#userid").val() != "") {
				$.ajax({
					url : "ajax_memberCheck.forrest",
					type : "post",
					data : userid,
					dataType : "html",
					error : function(e) {
						alert("ajax_memberCheck.forrest error");
						alert(e.responseText);
					},
					success : function(data) {
						if (data.trim() == "true") {
							msg = "ID가 있습니다.";
							$("#notice").html("");
							$("#userid").val("").focus();
							$("#userid").attr("placeholder", msg);
						} else {
							$("#notice").html("사용하셔도 좋습니다.").css({
								"color" : "blue",
								"font-size" : "8pt"
							});
						}
					}
				});
			}
		});

	});
</script>
<meta charset="UTF-8">
<title>회원가입</title>
</head>
<body>
	<div>
		<label style="font-size: 15pt;">회원가입</label>
	</div>
	<form action="MemberRegister.forrest" id="frmRegister" name="frmRegister" method="post" enctype="multipart/form-data">
		<div>
			<table style="width: 500px; border: 0px gray solid;">
				<tr>
					<td width="100" height="100" align="center" rowspan="2"><img src="" id="imgFile" name="imgFile"></td>
					<td width="120"><input type="file" id="btnImgFile" name="btnImgFile" tabindex="12"><br></td>
				</tr>

			</table>
		</div>
		<div>
			<table style="width: 500px; border: 0px gray solid;">
				<tr>
					<td width="60">이름</td>
					<td width="100"><input type="text" id="username" name="username" tabindex="1" required="required"></td>
				<tr>
				<tr>
					<td>아이디</td>
					<td><input type="text" id="userid" name="userid" tabindex="2"> <input type="button" id="btnIdCheck" value="중복검사"><span
						id="notice"></span></td>
				</tr>
				<tr>
					<td>비밀번호</td>
					<td><input type="password" id="passwd" name="passwd" tabindex="3" required="required"></td>
				<tr>
				<tr>
					<td>비밀번호확인</td>
					<td><input type="password" id="passwd2" name="passwd2" tabindex="4" required="required"><span id="passwdNotice"></span></td>
				<tr>
				<tr>
					<td>이메일</td>
					<td><input type="email" id="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" tabindex="5" required="required"></td>
				<tr>
				<tr>
					<td>성별</td>
					<td align="left">남<input type="radio" id="sex" name="sex" value="m" tabindex="6" checked="checked"> 여<input type="radio" id="sex"
						name="sex" value="f" tabindex="7">
					</td>
				<tr>
				<tr>
					<td>생년월일</td>
					<td><input type="text" id="birthdate" name="birthdate" tabindex="8" required="required"></td>
				<tr>
				<tr>
					<td>핸드폰</td>
					<td><input type="text" id="cellphone" name="cellphone" tabindex="9" required="required"></td>
				<tr>
			</table>
			<div>
				<table style="width: 300px; border: 0px gray solid;">
					<tr>
						<td width="100" align="center"><input type="submit" value="회원가입" id="btnRegister" name="btnRegister" tabindex="10"></td>
						<td width="120" align="center"><input type="reset" value="다시작성" id="btnReset" name="btnReset" tabindex="11"></td>
					</tr>
				</table>
			</div>
		</div>
	</form>
	<div id="result"></div>
</body>
</html>